<template>
  <a-drawer
    title="字典列表"
    @close="onClose"
    :visible="visible"
    width="500px"
  >
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="$refs.dictItemAddOrUpdate.edit('',queryParam.dictId,'add')">新建</a-button>
    </div>
    <a-table
      :columns="columns"
      :rowKey="record => record.id"
      :dataSource="tableData"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
    </a-table>
    <dict-item-add-or-update
      ref="dictItemAddOrUpdate"
      @ok="handleOk"
    />
  </a-drawer>
</template>

<script>
import { dictItemList, delItemObj } from '@api/sys/dict'
import DictItemAddOrUpdate from './dictItemAddOrUpdate'
export default {
  name: 'DictItemDrawer',
  components: {
    DictItemAddOrUpdate
  },
  data () {
    return {
      visible: false,
      loading: false,
      columns: [
        {
          title: '名称',
          dataIndex: 'itemText'
        },
        {
          title: '代码',
          dataIndex: 'itemCode'
        },
        {
          title: '类型',
          dataIndex: 'type'
        }, {
          title: '操作',
          customRender: (record) => {
            return (
              <div>
                <a
                  onClick={(e) => this.edit(record)}
                >编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm title="是否删除字典" onConfirm={(e) => this.delete(record)} okText="是" cancelText="否">
                  <a-icon slot="icon" type="question-circle-o" style="color: red" />
                  <a style="color: red"
                  >删除</a>
                </a-popconfirm>
              </div>
            )
          }
        }
      ],
      tableData: [],
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0,
        showSizeChanger: true
      },
      pages: {
        size: 10,
        current: 1
      },
      queryParam: {
        dictId: '',
        name: '',
        type: ''
      }
    }
  },
  methods: {
    init (record) {
      this.visible = true
      this.loading = true
      this.queryParam.dictId = record.id
      dictItemList({
        ...this.queryParam,
        ...this.pages
      }).then(res => {
        this.tableData = res.data.records
        this.pagination.total = res.data.total
        this.loading = false
      })
    },
    handleTableChange (pagination) {
      this.pagination = pagination
      this.pages.size = pagination.pageSize
      this.pages.current = pagination.current
      this.init()
    },
    edit (record) {
      this.$refs.dictItemAddOrUpdate.edit(record.id, this.queryParam.dictId, 'edit')
    },
    delete (record) {
      delItemObj(record.id).then(res => {
        this.$message.info('删除成功')
        this.init({ id: this.queryParam.dictId })
      })
    },
    onClose () {
      this.visible = false
    },
    handleOk () {
      this.init({ id: this.queryParam.dictId })
    }
  }
}
</script>

<style scoped>

</style>
